<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件通过数据驱动的单选框和复选框，可直接通过连接 uniCloud 获取数据，同时可以配合表单组件 fu-form 使用
		</demo-desc>
		
		<fu-section title="基本案例(单选)" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-checkbox v-model="sex1" :localdata="sex"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="列表模式(单选)" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-checkbox mode="list" v-model="sex2" :localdata="sex"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="列表模式(右边选择)" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-checkbox mode="list" icon="right" v-model="sex3" :border="false" :localdata="sex"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="按钮模式" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-checkbox mode="button" v-model="sex4" :localdata="sex"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="标签模式" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-checkbox mode="tag" v-model="sex5" :localdata="sex"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="多选案例" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用multiple属性开启多选</view>
			<view class="fu-m-t-20">
				<fu-checkbox mode="list" multiple v-model="checkbox1" :localdata="hobby"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="最大最小值" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用 min / max 设置多选的最大最小值,单选无效</view>
			<view class="fu-m-t-20">
				<fu-checkbox mode="list" min="1" max="2" multiple v-model="checkbox2" :localdata="hobby"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="禁用" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">数据中使用 disable 属性实现单独禁用,组件使用 disable 属性实现全部禁用</view>
			<view class="fu-m-t-20">
				<fu-checkbox mode="button" v-model="radio4" :localdata="sexs"></fu-checkbox>
			</view>
		</fu-section>
		
		<fu-section title="自定义高亮颜色" customClass="fu-m-t-20" type="line">
			<view class="fu-font-24 fu-color-999999 fu-m-t-10" slot="desc">使用 selectedColor 属性修改颜色</view>
			<view class="fu-m-t-20">
				<fu-checkbox selectedColor="red" mode="button" v-model="radio5" :localdata="sexs"></fu-checkbox>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';

	// data数据
	let sex1 = ref(0);
	let sex2 = ref(0);
	let sex3 = ref(0);
	let sex4 = ref(0);
	let sex5 = ref(0);
	let radio4 = ref(0);
	let radio5 = ref(0);
	let sex = reactive([{
		text: '男',
		value: 0
	}, {
		text: '女',
		value: 1
	}, {
		text: '未知',
		value: 2
	}]);
	let sexs = reactive([{
		text: '男',
		value: 0
	}, {
		text: '女',
		value: 1,
		disable: true
	}, {
		text: '未知',
		value: 2
	}]);
	let checkbox1 = reactive([0]);
	let checkbox2 = reactive([0]);
	const hobby = reactive([{
		text: '足球',
		value: 0
	}, {
		text: '篮球',
		value: 1
	}, {
		text: '游泳',
		value: 2
	}]);
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>